<template>
  <div class="coinrevenue-list-detail">

    <Row type="flex" justify="start" class="coinrevenue-list-edit">
      <Row type="flex" align="middle">
        <Col>
          <span>时间：</span>
        </Col>
        <Col class="concrete-data">
          <!-- <DatePicker
            type="daterange"
            placeholder="请选择"
            placement="bottom"
            :editable="false"
            :disabled="true"
            v-model="searchObj.dateTimes"
            format="yyyy-MM-dd"
            class="data-time-style"
            style="width:180px;"
          ></DatePicker> -->
          {{ this.$route.params.startTime }} - {{ this.$route.params.endTime }}
        </Col>
        <Row type="flex" align="middle" class="export-btn">
          <Col>
            <span>门店名称：</span>
          </Col>
          <Col>
          {{shopName}}
            <!-- <Select
              class="select"
              v-model="searchObj.shopId"

              filterable
              :disabled="true"
              :max-tag-count="1"
              :max-tag-placeholder="maxTagPlaceholder"
              style="width:180px"
            >
              <Option
                v-for="item in shopList"
                :value="item.shopId"
                :key="item.shopId"
              >{{ item.shopName }}</Option>
            </Select> -->
          </Col>
        </Row>
      </Row>
      <!-- <Row type="flex" align="middle">
        <Col style="padding-left:30px;">
          <Button type="primary" class="coinrevenue-btn" @click="search">查询</Button>
        </Col>
      </Row> -->
    </Row>
    <!-- -->
    <Table :loading="isloading" stripe ref="rowSpanTable" border  :columns="columns" :data="resData"></Table>
    <div class="page-box" style="margin-top: 20px">
      <!-- :current.sync="searchObj.offset" -->
      <Page
        :total="total"
        ref="pages"

        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { getShopList } from '@/api/system/store'

import { shopGroupBuyingDetail } from '@/api/report/shop'
import dayjs from 'dayjs'

export default {
  name: 'report_shop_groupbuying_detail',
  data () {
    return {
      shopList: [],
      total: 0,
      isloading: false,
      shopName: '',
      searchObj: {
        offset: 0,
        limit: 10,
        dateTimes: [],

        shopId: ''
      },
      model10: [],
      columns: [
        // { title: '门店', key: 'shopName', align: 'center', width: 185, fixed: 'left' },
        { title: '日期', key: 'createTime', align: 'center' },
        { title: '团购名称', key: 'merchantName', align: 'center' },
        { title: '产品名称', key: 'productName', align: 'center' },
        { title: '操作地点', key: 'createPosName', align: 'center' },
        { title: '取币数', key: 'amount', align: 'center' },
        { title: '补币数', key: 'reimburseAmount', align: 'center' }
      ],
      resData: []
    }
  },
  async created () {
    this.searchObj.dateTimes = [
      dayjs(this.$route.params.startTime).toDate(),
      dayjs(this.$route.params.endTime).toDate()
    ]
    this.searchObj.shopId = this.$route.params.id
    try {
      const shopList = await getShopList({
        permissionCode: 'moms:report:groupbuyanalytics',
        merchantId: this.$store.state.user.merchantId, // 商户id
        offset: 0,
        limit: 9999
      })
      if (shopList.data.status !== 200) return this.$Message.error(`${shopList.data.error}`)
      shopList.data.data.map(item => {
        if (item.shopId === this.$route.params.id) {
          this.shopName = item.shopName
        }
      })
      this.shopList = shopList.data.data
    } catch (error) {
      this.$Message.error(`${error}`)
    }
    this.shopGroupBuyingDetail()
  },
  mounted () {
    // this.getShopList()
  },
  methods: {
    async shopGroupBuyingDetail (
      data = {
        merchantId: this.$store.state.user.merchantId,
        shopIds: [this.searchObj.shopId],
        startDate: this.$route.params.startTime,
        endDate: this.$route.params.endTime,
        limit: this.searchObj.limit,
        offset: this.searchObj.offset
      }
    ) {
      this.isloading = true
      try {
        const res = await shopGroupBuyingDetail(data)
        this.isloading = false
        if (res.data.status !== 200) return this.$Message.error(`${shopList.data.error}`)
        this.resData = res.data.data || []
        this.total = res.data.totalCount
      } catch (error) {
        this.isloading = false
        this.$Message.error(`${error}`)
      }
    },
    maxTagPlaceholder (num) {
      return '...'
    },
    seletetime (val) {
      // this.getShopDays()
    },
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.shopGroupBuyingDetail()
    },
    handlePageSize (size) {
      this.searchObj.limit = size
      this.shopGroupBuyingDetail()
    },
    search (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.shopGroupBuyingDetail()
        }
      })
    }
    // 获取店面日汇总
  }
}
</script>
<style lang="less" scoped>
.coinrevenue-list-detail {
  .coinrevenue-list-edit {
    padding: 0 20px;
    height: 80px;
    .export-btn {
      margin-left: 24px;
    }
  }
  .from {
    margin-top: 24px;
  }
}
</style>
